<template>
  <div class="app-container">
    <el-card>
      <el-form label-width="80px">
        <el-row>
          <el-col :span="4">
            <el-form-item label="关键字">
              <el-input
                size="small"
                min-width="140px"
                v-model="queryInfo.keyword"
                placeholder="根据文章标题搜索"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="状态">
              <el-select v-model="queryInfo.state" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <div style="margin-left: 10px">
              <el-button
                size="small"
                @click="(queryInfo.keyword = null), (queryInfo.state = null)"
                >清除</el-button
              >
              <el-button size="small" type="primary" @click="searchFn"
                >搜索</el-button
              >
            </div>
          </el-col>
          <el-col :span="1" :push="8">
            <el-form-item>
              <el-button
                type="success"
                icon="el-icon-edit"
                size="small"
                @click="$refs.articleAdd.openDialog(), (isEdit = false)"
                >新增技巧</el-button
              >
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>
      <el-table :data="tableData">
        <el-table-column prop="id" label="序号" width="80px"></el-table-column>
        <el-table-column
          prop="title"
          label="文章标题"
          width="280px"
        ></el-table-column>
        <el-table-column prop="visits" label="阅读数"></el-table-column>
        <el-table-column prop="username" label="录入人"></el-table-column>
        <el-table-column prop="" label="录入时间">
          <template v-slot="{ row }">
            {{ row.createTime | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template v-slot="{ row }">
            {{ row.state ? "已禁用" : "已启用" }}
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作" width="200">
          <template v-slot="{ row }">
            <el-button type="text" @click="$refs.articlesPreview.getDetail(row)"
              >预览</el-button
            >
            <el-button type="text" @click="updateStatus(row)">
              {{ row.state ? "启用" : "禁用" }}</el-button
            >
            <el-button
              type="text"
              :disabled="!row.state"
              @click="$refs.articleAdd.dataBack(row), (isEdit = true)"
              >修改</el-button
            >
            <el-button type="text" :disabled="!row.state" @click="delFn(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        background
        @size-change="handleSizeChange"
        @current-change="currentChange"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="queryInfo.pagesize"
        :current-page.sync="queryInfo.page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 添加弹框 -->
    <articlesAdd
      ref="articleAdd"
      @done="getList()"
      :isEdit="isEdit"
    ></articlesAdd>
    <!-- 预览弹框 -->
    <articlesPreview ref="articlesPreview"></articlesPreview>
  </div>
</template>

<script>
// 导入接口
import { list, remove, changeState } from "@/api/hmmm/articles.js";
// 引入新增弹框
import articlesAdd from "../components/articles-add.vue";
// 引入预览弹框
import articlesPreview from "../components/articles-preview.vue";

export default {
  created() {
    this.getList();
  },
  components: {
    articlesAdd,
    articlesPreview,
  },
  data() {
    return {
      // 数据总条数
      total: 0,
      queryInfo: {
        page: 1,
        pagesize: 10,
        keyword: null,
        state: null,
      },
      tableData: [],
      // vue加载动画
      loading: false,
      // 下拉框数据
      options: [
        { value: 1, label: "禁用" },
        { value: 0, label: "启用" },
      ],
      isEdit: false,
    };
  },
  methods: {
    async getList() {
      this.loading = true;
      const res = await list(this.queryInfo);
      this.total = res.data.counts;
      this.tableData = res.data.items;
      this.loading = false;
      console.log(res);
    },
    // 处理分页条数
    handleSizeChange(val) {
      this.queryInfo.pagesize = val;
      this.getList();
    },
    // 处理当前页数数据
    currentChange(val) {
      this.queryInfo.page = val;
      this.getList();
    },
    // 处理删除
    delFn(val) {
      console.log(val);
      this.$confirm("确认删除?").then(() => {
        remove(val).then(() => {
          this.$message.success("删除成功!");
          this.getList();
        });
      });
    },
    // 是否启用功能
    async updateStatus(row) {
      row.state = !row.state;
      if (row.state) {
        row.state = 1;
      } else {
        row.state = 0;
      }
      await changeState(row);
      this.getList();
      this.$message.success("操作成功");
    },
    // 处理搜索
    searchFn() {
      this.getList();
    },
  },
};
</script>

<style scoped lang='sass'>
.pagination
  margin-top: 20px
  text-align: right
</style>
